<template>
    <div class="container shadow border border-1 p-5">
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">品牌</th>
                    <th scope="col">价格</th>
                    <th scope="col">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list" :key="item.id">
                    <th scope="row">{{ item.id }}</th>
                    <td>{{ item.name }}</td>
                    <td>{{ item.price }}</td>
                    <td><button @click="handler(item.id)" type="button" class="btn btn-outline-success">编辑</button></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup>
import { forEach } from "lodash";
import { ref } from "vue";
import { useRouter,useRoute } from "vue-router";

const route = useRoute()
const router = useRouter()

const list = ref([
    {
        "id": 1,
        "name": "奥迪 Q7",
        "price": 650000
    },
    {
        "id": 2,
        "name": "宝马 X6",
        "price": 700000
    },
    {
        "id": 3,
        "name": "奔驰 S350",
        "price": 1200000
    }
])

const handler = _id =>{
    const item = list.value.find(item => item.id ==_id)
    router.push({path:'/car/:carId/:carName/:carPrice',query:{carId:item.id,carName:item.name,carPrice:item.price}})
}

console.log(route.query);

 list.value.forEach(item =>{
    if(item.id == route.query.carid){
        // list.value.id = route.query.carid
        item.name = route.query.carname;
        item.price = route.query.carprice;
    
    }
 })

</script>

<style lang="scss" scoped>
.container{
    width: 800px;
}
</style>